import React from 'react'
import { View, StyleSheet, Text, TouchableOpacity, DeviceEventEmitter } from 'react-native'
import flexStyle from '../../../configs/flex'
import { px2dp } from 'rn-xiaobu-utils'
import Icon from '../../public/icon'
import fontsize from '../../../configs/fontsize'
import NavigationService from '../../../utils/NavigationService';

export default class BusNav extends React.Component {
  render () {
    return (
      <View style={[styles.wrapper, flexStyle.flexH, flexStyle.flexHsb]}>
        <TouchableOpacity style={[flexStyle.flexV, flexStyle.flexVc, flexStyle.flexHc]} onPress={()=>{
          NavigationService.navigate('Correction', {
            segmentId: this.props.segmentId
          })
        }}>
          <Icon color={'#999999'} name="errorcorrection"
            size={44}></Icon>
          <Text style={fontsize.fontsize20}>纠错</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[flexStyle.flexV, flexStyle.flexVc, flexStyle.flexHc]} onPress={()=>{
          NavigationService.navigate('SiteDetails', {
            id: this.props.thisId,
            name: this.props.thisName,
            type: this.props.type,
            lat: this.props.lat,
            lng: this.props.lng,
            title: this.props.thisName
          })
        }}>
          <Icon color={'#999999'} name="station1"
            size={44}></Icon>
          <Text style={fontsize.fontsize20}>同站路线</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[flexStyle.flexV, flexStyle.flexVc, flexStyle.flexHc]}>
          <Icon color={'#999999'} name="shoucang"
            size={44}></Icon>
          <Text style={fontsize.fontsize20}>收藏</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[flexStyle.flexV, flexStyle.flexVc, flexStyle.flexHc]} onPress={()=>{
          DeviceEventEmitter.emit('refreshLine')
        }}>
          <Icon color={'#999999'} name="refresh"
            size={44}></Icon>
          <Text style={fontsize.fontsize20}>刷新</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[flexStyle.flexV, flexStyle.flexVc, flexStyle.flexHc]}>
          <Icon color={'#999999'} name="cloudcard"
            size={44}></Icon>
          <Text style={fontsize.fontsize20}>云卡</Text>
        </TouchableOpacity>
      </View>)
  }
}

const styles = StyleSheet.create({
  wrapper: {
    // position: 'absolute',
    bottom: 0,
    height: px2dp(100),
    width: px2dp(750),
    backgroundColor: '#ffffff',
    zIndex: 50,
    paddingHorizontal: px2dp(55)
  }
})